<template>
  <div class="dialog-box">
    <div class="box-content" style="width: 20%">
      <div class="content-header">
        <span>设置坐标系</span>
        <i class="el-icon-close" style="font-size: 16px" @click="closeModelDialog"></i>
      </div>
      <div class="content-body">
        <el-form label-width="80px">
          <div class="form-item-box">
            <el-radio-group v-model="radio" style="width: 100%" @input="radioChange">
              <el-row :gutter="20" align="middle" style="margin-bottom: 10px" type="flex">
                <el-col :offset="0" :span="8">
                  <el-radio label="set">设置坐标系</el-radio>
                </el-col>
                <el-col :offset="0" :span="16">
                  <el-select v-model="coordinateSystem" :disabled="radio !== 'set'" :remote-method="remoteMethod"
                             filterable
                             placeholder="请选择坐标系"
                             remote style="width: 100%" @change="coordinateChange">
                    <el-option v-for="item in coordinateOptions" :key="item.value" :label="item.tag"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row :gutter="20" align="middle" style="margin-bottom: 10px" type="flex">
                <el-col :offset="0" :span="8">
                  <el-radio label="custom">自定义坐标系</el-radio>
                </el-col>
                <el-col :offset="0" :span="16">
                  <el-input v-model="customProj" :disabled="radio !== 'custom'" placeholder="请输入坐标系proj"
                            style="width: 100%" @change="projChange"></el-input>
                </el-col>
              </el-row>
            </el-radio-group>
          </div>
          <div class="form-item-box" style="border:none">
            <el-form-item class="submit-btn">
              <el-button type="primary" @click="clickConfirmBtn">确定</el-button>
              <el-button class="grey-hover-grey-button" @click="closeModelDialog">关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import epsgJson from "@/assets/js/searchinformation.json";
import data from "proj-data";

export default {
  data() {
    return {
      radio: "set",
      coordinateSystem: "",
      customProj: "",
      coordinateOptions: [],
      finalRes: {
        proj: "",
      },
    };
  },
  methods: {
    radioChange() {
      this.finalRes.proj = "";
      this.coordinateOptions = []
      this.coordinateSystem = ''
      this.customProj = ''
    },
    projChange(val) {
      this.finalRes.proj = val;
    },
    /**
     * 获取选择坐标对应的proj
     *
     * @param val 坐标转换参数，格式为"EPSG编号 其他参数"
     * @returns 无返回值
     */
    coordinateChange(val) {
      const epsg = val.split(" ")[0];
      this.finalRes.proj = data[epsg].proj4;
      this.finalRes.epsg = epsg
    },
    /**
     * 根据查询条件筛选坐标选项
     *
     * @param query 查询条件
     * @returns 无返回值
     */
    remoteMethod(query) {
      const lowerQuery = query.toLowerCase();
      if (lowerQuery) {
        this.coordinateOptions = epsgJson.filter((item) =>
            item.value.toLowerCase().includes(lowerQuery)
        );
      }
    },
    closeModelDialog() {
      this.$emit("close");
    },
    clickConfirmBtn() {
      this.$emit("confirm", this.finalRes);
    },
  },
  created() {
  },
  mounted() {
  },
};
</script>
<style lang="less" scoped>
.content-body {
  .el-radio {
    color: #fff;
  }
}
</style>